<template>
    <view class="payment">
        <uni-nav-bar fixed left-icon="left" title="回款管理" @clickLeft="backHandle" class="unibarS">
            <block slot="right">
                <text class="sub-btn" @click="addHandle()">新增回款单</text>
            </block>
        </uni-nav-bar>
        <u-sticky offset-top="0">
			<dropdown-screen
				ref="dropdownScreen"
				:barFontSize="32"
				:barTextColor="'rgba(12, 16, 25, 1)'"
				:activeColor="'rgba(77, 172, 177, 1)'"
				@tabClick="tabClick"
				@confirm="confirm"
				@reset="reset"
				:listArr="listArr">
				<template v-slot:content>
					<view class="searchContent" v-show="searchType == 0">
						<u--form labelPosition="top" ref="uForm" labelWidth="70">
							<u-form-item label="排序方式" ref="item1">
								<radio-group @change="radioChange($event, 'sortKeyValues')" class="radio-group-box">
									<label>
										<radio value="desc" :checked="tempSearchObj.sortKeyValues === 'desc'" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>正序排序</text>
									</label>
									<label>
										<radio value="asc" :checked="tempSearchObj.sortKeyValues === 'asc'" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>倒序排序</text>
									</label>
								</radio-group>
							</u-form-item>
							<u-form-item label="排序属性" ref="item1">
								<radio-group @change="radioChange($event, 'sortKey')" class="radio-group-box">
									<label v-for="(item, index) in sortPropsList" :key="index">
										<radio :value="item.value" :checked="tempSearchObj.sortKey === item.value" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>{{ item.name }}</text>
									</label>
								</radio-group>
							</u-form-item>
						</u--form>
					</view>
					<view class="searchContent" v-show="searchType == 1">
						<u--form labelPosition="top" ref="uForm" labelWidth="100">
							<u-form-item label="付款方式" ref="item1">
								<radio-group @change="radioChange($event, 'paymentMethod')" class="radio-group-box">
									<label v-for="(item, index) in bus_pay_statusList" :key="index">
										<radio :value="item.dictValue" :checked="tempSearchObj.paymentMethod === item.dictValue" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>{{ item.dictLabel }}</text>
									</label>
								</radio-group>
							</u-form-item>
							<u-form-item class="search-item-box" label="回款日期"  @click="openCalendar('startTime', 'endTime')" border ref="item1">
								<view>
                                    <view v-if="tempSearchObj.startTime && tempSearchObj.endTime">{{ tempSearchObj.startTime + ' - ' + tempSearchObj.endTime }}</view>
									<view v-else>选择时间范围</view>
								</view>
								<u-icon slot="right" name="clock"></u-icon>
							</u-form-item>
							<u-form-item class="search-item-box" label="审批提交时间"  @click="openCalendar('auditAddSTime', 'auditAddETime')" border ref="item1">
								<view>
									<view v-if="tempSearchObj.auditAddSTime && tempSearchObj.auditAddETime">{{ tempSearchObj.auditAddSTime + ' - ' + tempSearchObj.auditAddETime }}</view>
									<view v-else>选择时间范围</view>
								</view>
								<u-icon slot="right" name="clock"></u-icon>
							</u-form-item>
							<u-form-item class="search-item-box" label="审批完成时间"  @click="openCalendar('auditOverSTime', 'auditOverETime')" border ref="item1">
								<view>
									<view v-if="tempSearchObj.auditOverSTime && tempSearchObj.auditOverETime">{{ tempSearchObj.auditOverSTime + ' - ' + tempSearchObj.auditOverETime }}</view>
									<view v-else>选择时间范围</view>
								</view>
								<u-icon slot="right" name="clock"></u-icon>
							</u-form-item>
						</u--form>
					</view>
				</template>
			</dropdown-screen>
		</u-sticky>
        <uni-search-bar class="uni-mt-10" v-model="params.keyWords" bgColor="#FFFFFF" radius="5" placeholder="搜索" clearButton="auto"
            cancelButton="none" @confirm="searchHandle()" @clear="searchHandle()" />
        <view v-if="list.length" class="list">
            <view class="item" v-for="(item, index) in list" :key="index" @click="goDetails(item)">
                <view class="num">
                    <view class="num-box-num">订单编号：{{ item.paymentNumber }}</view>
                    <view class="num-box-text" :style="{ color: getColor(item.status) }">
                        {{ bus_examine_status[item.status] }}
                    </view>
                </view>
                <view class="time">
                    <view class="text-box">回款日期：{{ item.paymentDate }}</view>
                    <view class="text-box">客户名称：{{ item.customerName }}</view>
                </view>
                <view class="money">
                    <view class="text-box">回款金额：¥ {{ item.paymentAmount }}</view>
                    <view class="text-box">付款方式：{{ bus_pay_status[item.paymentMethod] }}</view>
                </view>
            </view>
            <uni-load-more :status="status" />
        </view>
        <empty-view v-else></empty-view>
        <!-- 选择跟进日期 -->
        <uni-calendar ref="calendar" class="uni-calendar--hook" :range="true" :clear-date="true" :date="info.date"
            :insert="info.insert" @confirm="confirmCalendar" @close="closeCalendar" />

    </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
import dropdownScreen from '@/components/dropdown-screen/dropdown-screen'
export default {
    components: {
		dropdownScreen
	},
    data() {
        return {
			params: {
				keyWords: '',
				pageNum: 1,
				pageSize: 20,

                sortKey: 'create_time',
				sortKeyValues: 'desc',
                paymentMethod: null, // 付款方式
                startTime: null,
                endTime: null,
                auditAddSTime: null,
                auditAddETime: null,
                auditOverSTime: null,
                auditOverETime: null,
			},
			total: 0,
			status: 'loading',
			refresh: false,
			list: [],
            listArr: [
				{
					label: '排序',
					iconPath: '/static/svg/icon-paixu.svg'
				},
				{
					label: '筛选',
					iconPath: '/static/svg/icon-shaixuan.svg'
				}
			],
			// 排序0  筛选1
			searchType: 0,
			showCalendar: true, // 显示日历
			sortPropsList: [
				{ name: '创建时间', value: 'create_time' },
			],
            info: {
                insert: false,
                selected: []
            },
			tempSearchObj: {
                sortKey: 'create_time',
				sortKeyValues: 'desc',
                paymentMethod: null, // 付款方式
                startTime: null,
                endTime: null,
                auditAddSTime: null,
                auditAddETime: null,
                auditOverSTime: null,
                auditOverETime: null,
			},
            startProp: null,
            endProp: null,
        }
    },
	onLoad() {

        this.bus_examine = JSON.parse(uni.getStorageSync('bus_examine_status'))
        this.bus_examine_status = convertToDict(this.bus_examine)

        this.bus_pay_statusList = JSON.parse(uni.getStorageSync('bus_pay_status'))
        this.bus_pay_status = convertToDict(this.bus_pay_statusList)

		this.getData()
	},
	onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},
    methods: {
		getData() {
			this.$http.get('/app/payment_received/list', this.params).then(res => {
				if (res.code == 200) {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					if (this.total > this.list.length) {
						console.log('有更多数据')
						this.status = 'more'
					} else {
						console.log('没更多数据')
						this.status = 'noMore'
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        addHandle() {
            uni.navigateTo({
                url: '/pages/payment/addPayment'
            });
        },
		searchHandle() {
			this.params.pageNum = 1
			this.status = 'loading'
			this.list = []
			this.getData()
		},
        search() { },
        seeMoney() {
            this.$refs.popup.open()
        },
        closePopup() {
            this.$refs.popup.close()
        },
        getColor(state) {
            let color;
            switch (state) {
                case '1001':
                color = 'rgba(0, 186, 173, 1)';
                break;
                case '1002':
                color = 'rgba(255, 141, 26, 1)';
                break;
                default:
                color = 'rgba(255, 0, 28, 1)';
            }
            return color;
        },
        goDetails(item) {
            uni.navigateTo({
                url: '/pages/payment/paymentDetails?id=' + item.id

            });
        },
        
		radioChange(e, props) {
			console.log(e)
			console.log(props)
			this.tempSearchObj[props] = e.detail.value
		},
		// 点击了 切换了 搜索标签
		tabClick(item) {
            Object.keys(this.params).forEach(key => {
				if (this.tempSearchObj.hasOwnProperty(key)) {
					this.tempSearchObj[key] = this.params[key];
				}
			});
			this.searchType = item.index
		},
		reset() {
			this.tempSearchObj = {
                sortKey: 'create_time',
				sortKeyValues: 'desc',
                paymentMethod: null, // 付款方式
                startTime: null,
                endTime: null,
                auditAddSTime: null,
                auditAddETime: null,
                auditOverSTime: null,
                auditOverETime: null,
			}
			Object.keys(this.tempSearchObj).forEach(key => {
				if (this.params.hasOwnProperty(key)) {
					this.params[key] = this.tempSearchObj[key];
				}
			});
			this.searchHandle()
		},
		confirm() {
			Object.keys(this.tempSearchObj).forEach(key => {
				if (this.params.hasOwnProperty(key)) {
					this.params[key] = this.tempSearchObj[key];
				}
			});
			this.searchHandle()
		},
        		// 打开日历
		openCalendar(start, end) {
            this.startProp = start
            this.endProp = end
            this.$refs.calendar.open()
        },
        // 确定日期
        confirmCalendar(e) {
			console.log(e)
			if(e.range.before && e.range.after) {
				let arr = []
				arr[0] = e.range.before? e.range.before : null
				arr[1] = e.range.after? e.range.after : null
				this.tempSearchObj[this.startProp] = arr[0]
				this.tempSearchObj[this.endProp] = arr[1]
			} else {
                this.tempSearchObj[this.startProp] = null
				this.tempSearchObj[this.endProp] = null
				// uni.$u.toast('请选择时间范围')
				return
			}
        },
        // 关闭日历
        closeCalendar() { },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/.u-sticky {
	z-index: 10 !important;
}
/deep/.uni-navbar__header-btns-right {
    width: 86px !important;
}
.list {
    >view:last-child {
        margin-bottom: 0;
    }
}
.item {
    padding: 32rpx;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 20rpx;
    > view {
        display: flex;
        align-items: center;
    }
    .text-box {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(103, 117, 133, 1);
    }
    .num {
        margin-bottom: 36rpx;
        .num-box-num {
            flex: 1;
        }
        .num-box-text {
            font-size: 24rpx;
        }
    }
    .time {
        margin-bottom: 20rpx;
        > view {
            flex: 1;
        }
    }
    .money {
        > view {
            flex: 1;
        }
    }
}
</style>